<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { jsonp } from "vue-jsonp";
import MD5 from "../../utils/md5.js";
const drag = ref(null);
const active = ref(false);
onMounted(() => {
  drag.value.addEventListener("drop", handleDrop);
  drag.value.addEventListener("dragleave", (e) => {
    active.value = false;
    e.preventDefault();
  });
  drag.value.addEventListener("dragenter", (e) => {
    active.value = true;
    e.preventDefault();
  });
  drag.value.addEventListener("dragover", (e) => {
    active.value = true;
    e.preventDefault();
  });
});

const trans = async (langs, text) => {
  let arrs = [];
  let keys = []
  let arr = [];
  let msgInfo = textdata;
  for (let key in msgInfo) {
    keys.push(key)
    arr.push("*");
    for (let childKey in msgInfo[key]) {
      keys.push(childKey)
      arr.push(msgInfo[key][childKey]);
    }
  }
  arrs.push(keys)
  arrs.push(arr)
  for (let lang of langs) {
    let appid = "20230804001769074";
    let sign = "iz1o3K0eUqpaKaWuIe7b";
    let salt = new Date().getTime();
    let str = `${appid}${text}${salt}${sign}`;
    const { trans_result } = await jsonp(
      "https://fanyi-api.baidu.com/api/trans/vip/translate",
      {
        q: text,
        from: "auto",
        to: lang,
        appid,
        salt,
        sign: MD5(str),
        output: "jsonp",
      }
    );
    let arr = [];
    for (let item of trans_result) {
      arr.push(item.dst);
    }
    arrs.push(arr);
  }
  var newArray = arrs[0].map(function (col, i) {
    return arrs.map(function (row) {
      return row[i];
    });
  });
  textRef.value.innerHTML = null;
  for (let item of newArray) {
    textRef.value.innerHTML += `${item}<br/>`;
  }
  getConvertFile(newArray)
};

onBeforeUnmount(() => {
  drag.value.removeEventListener("drop", handleDrop);
});

const textRef = ref(null);
const handleDrop = (e) => {
  e.preventDefault();
  active.value = false;
  var fileList = Array.from(e.dataTransfer.files);
  for (var i = 0; i < fileList.length; i++) {
    var reader = new FileReader();
    reader.readAsText(fileList[i], "UTF-8");
    reader.onload = function (e) {
      var content = e.target.result;
      var textContent = "";
      textContent += content;
      textContent = textContent.replaceAll("\r\n", "");
      textRef.value.innerText = textContent;
    };
  }
};

function getConvertFile(data) {
  let codeList = data;
  let zh_CN = {}; // 中文
  let zh_TW = {}; // 繁体
  let en_GB = {}; // 英文
  let fr_FR = {}; // 法语
  let pt_PT = {}; // 葡萄牙语
  let es_ES = {}; // 西班牙语
  for (let item1 of codeList) {
    if (item1[1] == '*') {
      zh_CN[item1[0]] = {};
      zh_TW[item1[0]] = {};
      en_GB[item1[0]] = {};
      fr_FR[item1[0]] = {};
      pt_PT[item1[0]] = {};
      es_ES[item1[0]] = {};
    }
  }
  let key = "";
  for (let item of codeList) {
    if (
      item.filter((v) => {
        return v == '*' || v == '* *';
      }).length > 5
    ) {
      key = item[0];
    } else {
      for (let temp of item) {
        if (zh_CN.hasOwnProperty(key)) {
          zh_CN[key][item[0]] = item[1];
          zh_TW[key][item[0]] = item[2];
          en_GB[key][item[0]] = item[3];
          fr_FR[key][item[0]] = item[4];
          pt_PT[key][item[0]] = item[5];
          es_ES[key][item[0]] = item[6];
        }
      }
    }
  }

  const objs = [zh_CN, zh_TW, en_GB, fr_FR, pt_PT, es_ES];
  const names = ["zh_CN", "zh_TW", "en_GB", "fr_FR", "pt_PT", "es_ES"];
  textRef.value.innerHTML = ''
  for (let index in names) {
    const name = names[index];
    // let text = `const ${name} = ${JSON.stringify(
    //   objs[index]
    // )};export default ${name};<br/>==================================<br/>`;
    let text = `${JSON.stringify(
      objs[index]
    )}<br/>==================================<br/>`;
    textRef.value.innerHTML += text;
  }
}

let contents = ref("");
function inputText() {
  trans(["cht", "en", "fra", "pt", "spa"], contents.value);
}

import textdata from "./text.js";
function convert() {
  let msgInfo = textdata;
  let content = "";
  for (let key in msgInfo) {
    content += `*\n`;
    for (let childKey in msgInfo[key]) {
      content += `${msgInfo[key][childKey]}\n`;
    }
  }
  trans(["cht", "en", "fra", "pt", "spa"], content);
}
</script>
<template>
  <v-card class="ma-2 pa-2">
    <v-btn color="success" @click="convert">转换</v-btn>
  </v-card>
  <v-card class="ma-2 pa-2">
    <div ref="textRef"></div>
  </v-card>
  <v-card class="ml-2 mr-2 pa-2">
    <v-textarea
      label="Please paste content here or drag and drop files below"
      @input.enter="inputText"
      v-model="contents"
    ></v-textarea>
  </v-card>
  <v-card class="ma-2 pa-2">
    <div :class="['drag', { 'drag-active': active }]" ref="drag">
      <p class="drag-title">No file/folder selected</p>
      <p class="drag-subtile">
        Support drag and drop to this area to upload, support to select multiple
        files/folders
        <br />
        A single folder supports up to 512GB
      </p>
    </div>
  </v-card>
</template>

<style lang="scss" scoped>
.drag {
  height: 220px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  &-active {
    border: 1px dashed #2260ff;
  }

  &-title {
    font-size: 14px;
  }

  &-subtile {
    font-size: 12px;
    color: #999999;
    margin-top: 30px;
    text-align: center;
    line-height: unset;
  }
}
</style>
